<template>
  <view class="page">
    <Header :title="'抗遗忘复习'"></Header>
    <view class="main_container">
      <view class="main_content">
        <view class="content">
          <view class="tabs">
            <reviewTabs :current="0"></reviewTabs>
          </view>
          <view class="box">
            <view class="section">
              <view class="title">
                <text> 打卡任务 (任选)</text>
              </view>
              <view class="list">
                <view class="list_title">
                  <view>今日打卡</view>
                </view>
                <view class="list_content" v-if="list.length > 0">
                  <view
                    class="list_item"
                    @click="
                      switchPage(
                        `/pages/review/review1Pronunciation?chapterId=${chapterId}&fxId=${list[0].fxId}`
                      )
                    "
                  >
                    <view class="list_img">
                      <image
                        style="width: 200rpx"
                        src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/review/btn_bg1.png"
                        mode="widthFix"
                      />
                    </view>
                    <view class="list_btn">
                      <text>发音测试</text>
                    </view>
                    <view class="list_text">
                      已复习{{ list[0].fxCount }}词
                    </view>
                  </view>
                  <view
                    class="list_item"
                    @click="
                      switchPage(
                        `/pages/review/review1Wording?chapterId=${chapterId}&fxId=${list[1].fxId}`
                      )
                    "
                  >
                    <view class="list_img">
                      <image
                        style="width: 203rpx"
                        src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/review/btn_bg2.png"
                        mode="widthFix"
                      />
                    </view>
                    <view class="list_btn">
                      <text>看词选意</text>
                    </view>
                    <view class="list_text">
                      已复习{{ list[1].fxCount }}词
                    </view>
                  </view>
                  <view
                    class="list_item"
                    @click="
                      switchPage(
                        `/pages/review/review1Spell?chapterId=${chapterId}&fxId=${list[2].fxId}`
                      )
                    "
                  >
                    <view class="list_img">
                      <image
                        style="width: 198rpx"
                        src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/review/btn_bg3.png"
                        mode="widthFix"
                      />
                    </view>
                    <view class="list_btn">
                      <text>单词拼写</text>
                    </view>
                    <view class="list_text">
                      已复习{{ list[2].fxCount }}词
                    </view>
                  </view>
                  <view
                    class="list_item"
                    @click="
                      switchPage(
                        `/pages/review/review1LianLianKan?chapterId=${chapterId}&fxId=${list[3].fxId}`
                      )
                    "
                  >
                    <view class="list_img">
                      <image
                        style="width: 196rpx"
                        src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/review/btn_bg4.png"
                        mode="widthFix"
                      />
                    </view>
                    <view class="list_btn">
                      <text>连连看</text>
                    </view>
                    <view class="list_text">
                      已复习{{ list[3].fxCount }}词
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getKyw21Detail } from "@/api/sync";
import reviewTabs from "./reviewTabs";

export default {
  components: { reviewTabs },
  data() {
    return {
      chapterId: "",
      id: "",
      list: [],
    };
  },
  onLoad(options) {
    this.chapterId = options.chapterId;
    this.id = options.id;
    this.getData();
  },
  methods: {
    getData() {
      getKyw21Detail(this.id).then((res) => {
        this.list = res.data;
      });
    },
    switchPage(url) {
      uni.navigateTo({
        url: url,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./review1Detail";
</style>
